<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">个人中心</block>
			</yy-custom>
		</view>

		<view class="content_box ">
			<view class="head bg-img w750 h679 "></view>
			<view class="info flex justify-center pb65">
				<view class="info-inside w690 bg-white  r20 padding-lr padding-top-xl">
					<view class="flex justify-center bt">
						<text class="text-center f36 text-black text-bold">填写个人信息</text>
						<view class="w230 h12 bt-inside bg-img"></view>
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm text-black ">真实姓名：</text>
						<input type="text" value="" v-model="name" placeholder="请填写真实姓名" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm text-black ">身份证号码：</text>
						<input type="number" value="" v-model="identity" placeholder="请填写身份证号码" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm text-black ">联系电话：</text>
						<input type="number" value="" v-model="phone" placeholder="请填写联系电话" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm text-black ">性别：</text>
						<!-- <input type="number" value="" placeholder="请填写联系电话" placeholder-class="ddd" /> -->
						<view class="flex margin-left" @click="click(1)">
							<image src="../../static/nan.png" mode="aspectFill" class="w28 h28"></image>
							<image src="../../static/xuanzhe2.png" mode="aspectFill" class="w26 h26 ml12" v-if="c == 1"></image>
							<image src="../../static/xuanzhe1.png" mode="aspectFill" class="w26 h26 ml12" v-else></image>
						</view>
						<view class="flex margin-left" @click="click(2)">
							<image src="../../static/nv.png" mode="aspectFill" class="w28 h28"></image>
							<image src="../../static/xuanzhe2.png" mode="aspectFill" class="w26 h26 ml12" v-if="c == 2"></image>
							<image src="../../static/xuanzhe1.png" mode="aspectFill" class="w26 h26 ml12" v-else></image>
						</view>
					</view>

					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black ">联系家长：</text>
						<input type="number" value="" v-model="phone_parents" placeholder="请填写家长联系电话" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black ">所在城市：</text>
						<input type="text" value="" v-model="city" placeholder="请选择所在城市" placeholder-class="ddd" />
					</view>

					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black ">就读学校：</text>
						<input type="text" value="" v-model="school" placeholder="请填写就读学校" placeholder-class="ddd" />
					</view>

					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black ">班主任姓名：</text>
						<input type="text" value="" v-model="teacher_name" placeholder="请填写班主任姓名" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black ">班主任电话：</text>
						<input type="number" value="" v-model="teacher_phone" placeholder="请填写班主任电话" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black ">就读培训机构：</text>
						<input type="text" value="" v-model="training_institutions" placeholder="请填写就读培训机构" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black wrap">培训机构指导老师姓名：</text>
						<input type="text" v-model="institutions_teacher" placeholder="请填写老师姓名" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing-none"></text>
						<text class="f28 margin-left-sm text-black wrap">培训机构指导老师电话：</text>
						<input type="text" v-model="institutions_phone" placeholder="请填写老师电话" placeholder-class="ddd" />
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm text-black wrap">专 业：</text>
						<input type="text" value="" v-model="major" placeholder="请选择专业" placeholder-class="ddd" />
					</view>

					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm">本人照片</text>
					</view>
					<view class="padding-top-xl flex align-center justify-between ">
						<u-upload :action="action" width="270" max-count="1" @on-success="success1"></u-upload>
					</view>

					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm">相关证书</text>
					</view>
					<view class="padding-top-xl flex align-center ">
						<u-upload :action="action" width="270" max-count="2" @on-success="success2"></u-upload>
					</view>
					<view class="padding-top-xl flex align-center ">
						<text class="xing"></text>
						<text class="f28 margin-left-sm">相关图片</text>
					</view>
					<view class="padding-top-xl flex align-center ">
						<u-upload :action="action" width="270" max-count="2" @on-success="success3"></u-upload>
					</view>

					<button class="cu-btn btn w610 h100 r50 f36 mt86" @click="signUp">报名</button>
					<view class="mt31 flex justify-center mt31 mb56 ">
						<text class="f22 text-yellow ">*你所填信息将用于后台审核不会用于其他用途,请如实填写</text>
					</view>
				</view>
			</view>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			c: 1,
			action: this.$API_URL + '/addons/alioss/index/upload',

			// datar: [{ name: '机构' }, { name: '专家' }, { name: '学生' }],
			name: '',
			identity: '',
			phone: '',
			sex: '',
			phone_parents: '',
			city: '',
			school: '',
			teacher_name: '',
			teacher_phone: '',
			training_institutions: '',
			institutions_teacher: '',
			institutions_phone: '',
			major: '',
			img: '',
			certificates_img: [],
			video: [],
		};
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		async success1(e) {
			this.img = e.data.fullurl;
			console.log(' this.img :>> ', this.img);
		},
		async success2(e) {
			console.log('e :>> ', e);

			this.certificates_img.push(e.data.fullurl);
			console.log(' this.certificates_img :>> ', this.certificates_img);
		},
		async success3(e) {
			this.video.push(e.data.fullurl);
			console.log('this.video :>> ', this.video);
		},
		click(e) {
			this.c = e;
		},
		async signUp() {
			console.log('this.c + 1 :>> ', this.c);
			if ([this.name, this.identity, this.phone, this.major].includes('')) {
				return this.$refs.uToast.show({ title: '请填写必填项', type: 'error' });
			}
			let obj = {
				name: this.name,
				identity: this.identity,
				phone: this.phone,
				sex: this.c + '',
				phone_parents: this.phone_parents,
				city: this.city,
				school: this.school,
				teacher_name: this.teacher_name,
				teacher_phone: this.teacher_phone,
				training_institutions: this.training_institutions,
				institutions_teacher: this.institutions_teacher,
				institutions_phone: this.institutions_phone,
				major: this.major,
				img: this.img, // 本人照片
				certificates_img: this.certificates_img, // 证书照片
				video: this.video, //视频
			};
			const res = await this.$u.post('/api/Authentication/TalentAdd', obj, {});
			if (!res.code) return this.$refs.uToast.show({ title: res.msg, type: 'error' });
			this.$refs.uToast.show({ title: res.msg, type: 'success' });
			setTimeout(() => {
				uni.switchTab({
					url: 'hmPage',
				});
			}, 500);
		},
	},
};
</script>

<style lang="scss" scoped>
.page_box {
	.head_box {
	}
	.content_box {
		.head {
			background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/beijing33.png);
		}
		.info {
			width: 750rpx;
			margin-top: -5rpx;
			background: linear-gradient(#fe7003, #ffb202);
		}
		.xing::after {
			content: '*';
			color: #ff1212;
			font-size: 28rpx;
		}
		.xing-none::after {
			content: '';
			display: block;
			width: 10rpx;
			color: #ff1212;
			font-size: 28rpx;
		}
		.ddd {
			line-height: 1;
			font-size: 28rpx;
			font-family: PingFang SC;
		}
		input {
			width: 50vw;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.btn {
			background-color: #fe7003;
			color: #ffffff;
		}
		.bt {
			position: relative;
			.bt-inside {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				background-image: url(https://i.loli.net/2021/05/12/JqTxScdG6YHjNik.png);
			}
		}
		.wrap {
			white-space: nowrap;
		}
		/deep/.u-upload {
			width: 100%;
			display: flex !important;
			justify-content: space-between !important;
		}
	}
}
</style>
